<style scoped>
.left-part,.right-part{
    height: 650px;
    overflow: auto;
    float: left;
}
.left-part{
    width: 30%;
    background-color: #fff;
    border-radius: 10px 0 0 10px;
}
.right-part{
    width: 70%;
    background-color: #fff;
    border-radius: 0px 10px 10px 0;
}

.left-part h3{
    padding-left: 20px;
    color: #fff;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    background-color: #9E3110;
}
.left-part ul li{
    height: 84px;
    margin: 8px 0;
    cursor: pointer;
    border-bottom: 1px dashed #E2E0E0;
}
.left-part ul li:hover{
    border: 2px solid #9E3110;
}
/*点击报告样式*/
.left-part ul li.active{
    color: #9E3110;
}
.left-part ul li .number span.active{
    color: #9E3110;
}
.left-part ul li.border{
    border: 2px solid #9E3110;
}

.left-part ul li .number{
    padding-left: 30px;
    margin-top: 16px;
}
.left-part ul li .number label{
    color: #999;
    float: left;
    line-height: 28px;
    font-size: 16px;
    margin-right: 5px;
}
.left-part ul li .number span{
    float: left;
    width: 78%;
    color: #000;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.left-part ul li .number span:hover{
    color: #42B179;
}
.left-part ul li span.meal-date{
    float: left;
    margin-left: 30px;
    color: #929292;
    font-size: 14px;
    text-indent: 24px;
    background: url(../assets/img/date.png) no-repeat -5px center;
    background-size: 24px;
}

/*right*/
.right-part{
    padding: 20px;
}
.right-part .meal-title{
    color: #9E3110;
    text-indent: 10px;
    background: url(../assets/img/orangered-border.png) no-repeat left center;
}

.right-part .meal-item table td.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.items{
    margin: 15px;
}
.items .items-title{
    color: #9E3110;
    font-size: 16px;
}
.nodate{
    color: #f00;
    font-size: 20px;
    text-align: center;
    line-height: 84px;
}

.suggestion{
    color: #9E3110;
}

.items .titles{
    border: 1px solid #CCC;
    height: 36px;
}
.items .titles li{
    width: 30%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    float: left;
    border-right: 1px solid #CCC;
}
.items .titles li:last-child{
    border-right: none;
}


</style>

<template>
    <div class="appoint">
        <!-- 预约报告 -->
        <div class="left-part" v-show="!isAppo">
            <h3>我的体检报告</h3>
            <div class="left-list">
                <ul>
                    <li v-for="($index,item) in setMealList" @click="selectSetMeal($index,item)" :class="{'border':$index==clickIndex}">
                        <div class="number">
                            <label for="">体检号:</label>
                            <span v-text="item.tjbh" :class="['title',{'active':$index==clickIndex}]"></span>
                        </div>
                        <span class="meal-date" v-text="item.tjrq |convertDate"></span>
                    </li>
                    <li class="nodate" v-if="noDate">未查询到有体检报告！</li>
                </ul>
            </div>
        </div>
        <!-- 预约详情 -->
        <div class="right-part">
            <div class="meal-item">
                <h3 class="meal-title">体检报告详情</h3>

                <!-- 综述建议 -->
                <div class="items">
                    <p class="items-title">综述建议</p>
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <td>综述:{{setMealItemDetail.coreMessage.zs}}</td>
                            </tr>
                            <tr>
                                <td class="suggestion">建议:{{setMealItemDetail.coreMessage.jy}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 小结 -->
                <div class="items">
                    <p class="items-title">小结概述</p>
                    <table class="table table-bordered">
                        <tbody v-for="res in setMealItemDetail.tjxjMesasage">
                            <tr>
                                <td class="suggestion">科室名称:{{res.ksmc}}</td>
                            </tr>
                           <tr>
                                <td>小结:{{res.xj}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 明 细 -->
                <div class="items">
                    <div v-for="item in setMealItemDetail.tjjlmxbMessage">
                        <p class="items-title" v-text="item.ksmc"></p>
                        <ul class="titles">
                            <li class="col-md-4">项目名称</li>
                            <li class="col-md-4">检查结果</li>
                            <li class="col-md-4">参考范围</li>
                        </ul>
                        <ul class="titles" v-for="items in item.details">
                            <li class="col-md-4" v-text="items.xmmc"></li>
                            <li class="col-md-4" v-text="items.jg"></li>
                            <li class="col-md-4 ellipsis" v-text="items.CKFW" title="{{items.CKFW}}"></li>
                        </ul>
                    </div>
                    <!-- <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th class="col-md-4">项目名称</th>
                                <th class="col-md-4">检查结果</th>
                                <th class="col-md-4">参考范围</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in setMealItemDetail.tjjlmxbMessage">
                                <tr v-for="items in item.details">
                                    <td class="col-md-4" v-text="items.xmmc"></td>
                                    <td class="col-md-4" v-text="items.jg"></td>
                                    <td class="col-md-4 ellipsis" v-text="items.CKFW" title="{{items.CKFW}}"></td>
                                </tr>
                            </tr>
                        </tbody>
                    </table> -->
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
var headimg = require("assets/img/cs11.jpg");
export default {
    data() {
            return {
                headimg: headimg,
                setMealList: [],
                //点击获取索引值
                clickIndex: 0,
                //获取报告项目详情
                setMealItemDetail: {
                    'coreMessage': {
                        'zs': '',
                        'jy': ''
                    }
                },
                //无预约记录
                noDate: false,
                //临时mpiId
                temporaryMpi: ''
            }
        },
        ready() {
            //获取报告列表
            //this.getSetMealList();
        },
        filters: {
            'convertDate': function(dt){
                let date = new Date(dt);
                let month = date.getMonth() < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
                let day= date.getDate() < 10 ? '0'+date.getDate() : date.getDate();
                    date = date.getFullYear()+'-'+month+'-'+day;
                return date;
            }
        },
        methods: {
            //获取报告列表
            getSetMealList (mpi) {
                this.temporaryMpi = mpi;
                $.when(Public.commonajax('coms.physicalExamService','findReportList','["'+mpi+'"]')).done(res=> {
                    if(res.code == 200){
                        this.noDate = false;
                        this.setMealList = res.body;
                        //默认渲染首条报告
                        this.selectSetMeal(this.clickIndex,this.setMealList[0]);
                    }else{
                        this.noDate = true;
                    }
                });
            },

            //获取报告详情
            selectSetMeal (index,item) {
                this.clickIndex = index;
                $.when(Public.commonajax('coms.physicalExamService','getPhysicalExamReport',`["${this.temporaryMpi}","${item.tjbh}"]`)).done(res=> {
                    this.setMealItemDetail = res.body;
                });
            }
        }
}
</script>
